<template>
    <div
        class="hstorical-data-gauge"
        :style="{
            background: datas.setStyle.backColor,
            marginTop: datas.setStyle.marginTop + 'px',
            marginBottom: datas.setStyle.marginBottom + 'px',
        }"
    >
        <div class="no-data" v-if="datas.setConfig.attributes.length === 0">
            <span>{{ $t('drag.123456-67') }}</span>
        </div>
        <div class="content" v-else>
            <div class="grid-container" :style="{ gridTemplateColumns: `repeat(${datas.setStyle.rowNum}, minmax(0, 1fr))` }">
                <div class="grid-col" v-for="item in datas.setConfig.attributes" :key="item.templateId">
                    <div class="panel">
                        <div class="gauge" :style="{ width: datas.setStyle.width + 'px', height: datas.setStyle.width + 'px' }" :id="`gaugeChart_${item.templateId}`"></div>
                    </div>
                    <div class="name" :style="{ color: datas.setStyle.nameColor, fontSize: `${(datas.setStyle.width - 137) / (93 / 4) + 12}px` }">{{ item.templateName }}</div>
                </div>
            </div>
        </div>
        <div v-show="false">{{ attributes }} {{ numColor }} {{ loopColor }} {{ gaugeWidth }}</div>
        <!-- 删除组件 -->
        <slot name="deles" />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { min } from 'lodash';

export default {
    name: 'hstoricalDataGauge',
    props: {
        datas: Object,
    },
    data() {
        return {
            myChart: {},
        };
    },
    computed: {
        attributes() {
            this.$nextTick(function () {
                this.getGaugeChart();
            });
            return this.datas.setConfig.attributes;
        },
        numColor() {
            this.$nextTick(function () {
                this.updateNumColor();
            });
            return this.datas.setStyle.numColor;
        },
        loopColor() {
            this.$nextTick(function () {
                this.updateLoopColor();
            });
            return this.datas.setStyle.loopColor;
        },
        gaugeWidth() {
            this.$nextTick(function () {
                this.updateGaugeWidth();
            });
            return this.datas.setStyle.width;
        },
    },
    methods: {
        getGaugeChart() {
            console.log('传递的数据', this.datas);
            const { attributes } = this.datas.setConfig;
            if (attributes.length !== 0) {
                attributes.forEach((item, index) => {
                    // ref 获取不到改用id
                    const dom = document.getElementById(`gaugeChart_${item.templateId}`);
                    this.myChart[index] = echarts.init(dom);
                    const option = {
                        series: [
                            {
                                title: {
                                    offsetCenter: [0, '115%'],
                                    fontSize: 16,
                                },
                                type: 'gauge',
                                colorBy: 'data',
                                splitNumber: 10,
                                radius: '100%',
                                axisLine: {
                                    lineStyle: {
                                        width: 8,
                                        color: [
                                            [0.2, '#409EFF'], // 0~20%
                                            [0.8, '#12d09f'], // 40~60%
                                            [1, '#F56C6C'], // 80~100%
                                        ],
                                        opacity: 0.3,
                                    },
                                },
                                min: item.min,
                                max: item.max,
                                pointer: {
                                    icon: 'triangle',
                                    length: '60%',
                                    width: 7,
                                },
                                axisTick: {
                                    distance: 4,
                                },
                                splitLine: {
                                    distance: 4,
                                },
                                axisLabel: {
                                    fontSize: 10,
                                    distance: 10,
                                },
                                progress: {
                                    show: true,
                                    width: 8,
                                },
                                detail: {
                                    valueAnimation: true,
                                    formatter: '{value}' + `${item.unit}`,
                                    offsetCenter: [0, '80%'],
                                    fontSize: 20,
                                },
                                data: [
                                    {
                                        value: item.min,
                                    },
                                ],
                            },
                        ],
                    };
                    setInterval(() => {
                        this.myChart[index].setOption({
                            series: [
                                {
                                    data: [
                                        {
                                            value: item.min,
                                        },
                                    ],
                                },
                            ],
                        });
                    }, 2000);
                    option && this.myChart[index].setOption(option);
                });
            }
        },
        // 更新数值颜色
        updateNumColor() {
            const { attributes } = this.datas.setConfig;
            if (attributes.length !== 0) {
                attributes.forEach((item, index) => {
                    var currentOption = this.myChart[index].getOption();
                    currentOption.series[0].detail = { color: this.datas.setStyle.numColor };
                    this.myChart[index].setOption(currentOption);
                });
            }
        },
        // 更新环形颜色
        updateLoopColor() {
            const { attributes } = this.datas.setConfig;
            if (attributes.length !== 0) {
                attributes.forEach((item, index) => {
                    var currentOption = this.myChart[index].getOption();
                    currentOption.series[0].progress = { itemStyle: { color: this.datas.setStyle.loopColor } };
                    currentOption.series[0].pointer = { itemStyle: { color: this.datas.setStyle.loopColor } };
                    this.myChart[index].setOption(currentOption);
                });
            }
        },
        // 更新仪表大小
        updateGaugeWidth() {
            const { attributes } = this.datas.setConfig;
            if (attributes.length !== 0) {
                attributes.forEach((item, index) => {
                    this.myChart[index].resize({
                        width: this.datas.setStyle.width,
                        height: this.datas.setStyle.width,
                    });
                    var currentOption = this.myChart[index].getOption();
                    currentOption.series[0].detail = { fontSize: (this.datas.setStyle.width - 137) / (93 / 6) + 14 };
                    this.myChart[index].setOption(currentOption);
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.hstorical-data-gauge {
    position: relative;

    .no-data {
        padding: 20px;
        margin: 12px 20px;
        border: 2px dotted #ddd;
        border-radius: 5px;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        color: #999;
    }

    .content {
        .grid-container {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            grid-gap: 16px;
            margin: 0;
            padding: 16px;

            .grid-col {
                .panel {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .gauge {
                        height: 230px;
                        width: 230px;
                    }
                }
                .name {
                    margin: 5px 0 0 0;
                    height: 20px;
                    text-align: center;
                    font-size: 16px;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>
